<template>
	<div class="layout">
		<index-nav class="nav"></index-nav>
		<div class="main-box">
			<div class="main-content">
                <div class="main-head">
					<div class="logo">
						后台管理系统
					</div>
					<el-dropdown>
						<div class="head-img-box">
							<el-image class="head-img" :src="head_src">
								<div slot="error" class="head-img">
									<i class="el-icon-picture-outline"></i>
								</div>
							</el-image>
							<i class="el-icon-caret-bottom" style="color: #999"></i>
						</div>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item class="login-out" divided>退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
                    
                </div>
                <div class="main-body">
                    <router-view></router-view>
                </div>
                <!-- <div class="main-foot"></div> -->
			</div>
		</div>
	</div>
</template>

<script>
import IndexNav from '@/components/basic/nav.vue'
export default {
	components: {
		IndexNav,
	},
	data () {
		return {
			head_src: '#'
		}
	},
}
</script>

<style lang="scss" scoped>
.layout {
	height: 100vh;
	display: flex;
	.nav {
		flex-shrink: 0;
	}
	.main-box {
		width: 100%;
		background-color: #f3f3f3;
		.main-content {
			width: 100%;
			height: 100%;
			// padding: 10px;
			max-height: 100%;
			overflow-y: auto;
            display: flex;
            flex-direction: column;
            .main-head {
                flex-shrink: 0;
				// height: 50px;
				box-shadow: 0 0 10px #ccc;
				z-index: 9;
				padding: 10px 40px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.logo {
					// font-style: oblique;
					font-weight: 600;
					color: #888;
				}
            }
            .main-body {
                height: 100%;
            }
		}
	}
}

.head-img-box {
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	&:hover {
		// filter: brightness(1.1);
		i {
			filter: brightness(1.2);
		}
	}
	.head-img {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgb(230, 230, 230);
	}
}

.login-out {
	transition: all 0.3s;
	&:hover {
		background-color: #FEF0F0;
		color: #F56C6C;
	}
}

</style>
